<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:p="http://primefaces.org/ui"
   xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
   template="/WEB-INF/templates/default.xhtml">
    
    <f:metadata>
    	<f:viewParam name="bulletinId" value="#{bulletinHome.id}"></f:viewParam>
    	<f:event listener="#{bulletinEndClientEndPointService.sendTestMessage('8ac183265fc7f438015fc8002a410006')}" type="preRenderView"></f:event>
    </f:metadata>
    
    <ui:define name="head">、
    	<h:outputStylesheet name="css/public/jquery.slotmachine.min.css"></h:outputStylesheet>
    	<h:outputScript name="js/public/jquery.slotmachine.min.js"></h:outputScript>
    	<script type="text/javascript">
    		var websocket; 
    		var machine;
    		var machine1;
    		var machine2;
    		var machine3;
			$(function () {
				if (typeof(WebSocket) !== "undefined") {
					var host = window.location.host;
					var wsUri = "ws://" + host + "/bulletinEnd/1000";
					websocket = new WebSocket(wsUri);
					websocket.onopen = function () {
						
					};
					websocket.onmessage = function (evt) {
						if ($('#chooseType').val() == 'Random') {
							machine = $("#textMachine").slotMachine({
								active	: 1,
								delay	: 450,
								auto	: false,
								randomize: function(){
									return $("div[supplierId = '" + evt.data + "']").attr("active");
								}
							});
							machine.shuffle();
							setTimeout(machine.stop(), 5000);
						} else if ($('#chooseType').val() == 'Best') {
							var supplierArray = evt.data.split(",");
							machine1 = $("#textMachine1").slotMachine({
								active	: 1,
								delay	: 450,
								auto	: false,
								randomize: function(){
									var result = $("#textMachine1").find("div[supplierid = '" + supplierArray[0] + "']").attr("active");
									console.info(result);
									return result;
								}
							});
							machine1.shuffle();
							setTimeout(function() {
								machine1.stop();
							}, 3000);

							machine2 = $("#textMachine2").slotMachine({
								active	: 1,
								delay	: 450,
								auto	: false,
								randomize: function(){									
									if ($('#bestTradesCount').val() &lt; 2) 
										return -1;
									var result = $("#textMachine2").find("div[supplierid = '" + supplierArray[1] + "']").attr("active");
									console.info(result);
									return result;
								}
							});
							machine2.shuffle();
							setTimeout(function() {
								machine2.stop();
							}, 6000);

							machine3 = $("#textMachine3").slotMachine({
								active	: 1,
								delay	: 450,
								auto	: false,
								randomize: function(){									
									if ($('#bestTradesCount').val() &lt; 3) 
										return -1;
									var result = $("#textMachine3").find("div[supplierid = '" + supplierArray[2] + "']").attr("active");
									console.info(result);
									return result;
								}
							});
							machine3.shuffle();
							setTimeout(function() {
								machine3.stop();
							}, 9000);
						}
					};					
				} else {
					alert("您的浏览器不支持Websocket，请更换浏览器，推荐使用Chrome、Firefox、IE11.0及以上版本。");
				}
			});
    	</script>
    </ui:define>    
    
   	<ui:define name="content">
   	
   		<input id="chooseType" type="hidden" value="#{bulletinHome.instance.wayOfChoose.name()}" />
   		<input id="bestTradesCount" type="hidden" value="#{bulletinHome.instance.trades.size()}" />
   
		<p:outputPanel rendered="#{bulletinHome.instance.wayOfChoose.name() == 'Random'}">
			<div id="textMachine" style="text-align: center; height: 36px; display: inline-block; overflow: hidden; font-size: 32px;">			
				<p:repeat var="_trade" value="#{bulletinHome.instance.trades}" varStatus="_status">
					<div supplierId="#{_trade.supplier.id}" active="#{_status.index}">
						<h:outputText value="#{_trade.supplier.cnname}" />
					</div>
				</p:repeat>
			</div>
		</p:outputPanel>
		
		<p:outputPanel rendered="#{bulletinHome.instance.wayOfChoose.name() == 'Best'}">
			<div id="textMachine1" style="text-align: center; height: 36px; display: inline-block; overflow: hidden; font-size: 32px;">		
				<p:repeat var="_trade" value="#{bulletinHome.instance.trades}" varStatus="_status">
					<div supplierId="#{_trade.supplier.id}" active="#{_status.index}">
						<h:outputText value="#{_trade.supplier.cnname}" />
					</div>
				</p:repeat>
				<div active="none">
					无人报名
				</div>	
			</div>
			<div id="textMachine2" style="text-align: center; height: 36px; display: inline-block; overflow: hidden; font-size: 32px;">		
				<p:repeat var="_trade" value="#{bulletinHome.instance.trades}" varStatus="_status">
					<div supplierId="#{_trade.supplier.id}" active="#{_status.index}">
						<h:outputText value="#{_trade.supplier.cnname}" />
					</div>
				</p:repeat>
				<div active="none">
					无人报名
				</div>	
			</div>
			<div id="textMachine3" style="text-align: center; height: 36px; display: inline-block; overflow: hidden; font-size: 32px;">		
				<p:repeat var="_trade" value="#{bulletinHome.instance.trades}" varStatus="_status">
					<div supplierId="#{_trade.supplier.id}" active="#{_status.index}">
						<h:outputText value="#{_trade.supplier.cnname}" />
					</div>
				</p:repeat>
				<div active="none">
					无人报名
				</div>	
			</div>
		</p:outputPanel>
		
		<h:form>
			<p:commandButton ajax="true" action="#{bulletinEndClientEndPointService.sendTestMessage(bulletinHome.id)}"></p:commandButton>
		</h:form>
	
      
   	</ui:define>
   	
</ui:composition>
